<template>
  <Header title="保存桌面端" />
  <div class="saveToDeasktop">
    <div class="block b1" @click="showPopup(0)"></div>
    <div class="block b2" @click="showPopup(1)"></div>
    <div class="block b3" @click="showPopup(2)"></div>
    <div class="block b4" @click="showPopup(3)"></div>
    <div class="block b5" @click="showPopup(4)"></div>
    <div class="block b6" @click="showPopup(5)"></div>
  </div>
  <van-popup v-model:show="show" position="bottom" :style="{ minHeight: '70%', boxShadow: '0 0 10px #999' }"
    :overlay-style="{ opacity: 0 }" :round="true">
    <div class="pop_title">
      <div class="back" @click="show = false"><van-icon name="arrow-left" />返回</div>
      <h1>{{ list[selectId].name }}手机保存教程</h1>
    </div>
    <div class="pop-con"><img :src="list[selectId].url" width="100%" /></div>
  </van-popup>
</template>

<script setup>
const list = [
  { "id": 0, "name": "华为", "url": new URL('@/assets/img/save/huawei.png', import.meta.url).href },
  { "id": 1, "name": "荣耀", "url": new URL("@/assets/img/save/honor.png", import.meta.url).href },
  { "id": 2, "name": "小米", "url": new URL("@/assets/img/save/xiaomi.png", import.meta.url).href },
  { "id": 3, "name": "苹果", "url": new URL("@/assets/img/save/apple.png", import.meta.url).href },
  { "id": 4, "name": "OPPO", "url": new URL("@/assets/img/save/oppo.png", import.meta.url).href },
  { "id": 5, "name": "VIVO", "url": new URL("@/assets/img/save/vivo.png", import.meta.url).href },
]
const show = ref(false)
const selectId = ref(0)

function showPopup(id) {
  selectId.value = id;
  show.value = true;
}
</script>

<style lang="less" scoped>
.saveToDeasktop {
  width: 375px;
  height: 725px;
  background: url("@/assets/img/save/bg.jpg") center;
  background-size: cover;
  position: relative;
  .block{
    width: 100px;
    height: 30px;
    position: absolute;
  }
  .b1{
    left: 66px;
    top: 394px;
  }
  .b3 {
    left: 66px;
    top: 446px;
  }
  .b5 {
    left: 66px;
    top: 502px;
  }
  .b2{
    right: 86px;
    top: 394px;
  }
  .b4{
    right: 86px;
    top: 446px;
  }
  .b6 {
    right: 86px;
    top: 502px;
  }
}
.pop_title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;

  h1 {
    font-size: 18px;
    text-align: center;
    font-weight: 700;
  }

  .back {
    position: absolute;
    left: 10px;
    display: flex;
    align-items: center;
    font-size: 16px;
  }
}
.pop-con{
  width: 100%;
  padding: 0 20px;
  background-color: #fff;
  img{
    background-color: #fff;
  }
}
</style>
